import { Grid, Image } from 'antd-mobile';
import { IProduct } from '@/utils/type';
import style from './index.module.less';

interface IProps {
  data: IProduct;
}
/**
 * 商品基本信息
 * @constructor
 */
const BaseInfo = ({ data } : IProps) => (

  <div className={style.container}>
    <div className={style.baseInfo}>
      <Image src={data.coverUrl} alt="封面图片" className={style.img} />
      <div className={style.title}>
        <div className={style.name}>
          {data.name}
        </div>
        <div className={style.productDesc}>
          {data.desc}
        </div>
      </div>
    </div>
    {/* <Hr /> */}
    <div className={style.saleInfo}>
      <Grid columns={12}>
        <Grid.Item span={4}>
          剩余库存:&nbsp;
          {data.stock}
        </Grid.Item>
        <Grid.Item span={4}>
          每人限购:&nbsp;
          {data.limitBuyNumber}
        </Grid.Item>
        <Grid.Item span={4}>
          已售:&nbsp;
          {data.buyNumber}
        </Grid.Item>
      </Grid>
    </div>
  </div>
);

export default BaseInfo;
